<template>
	<view class="collect-page">
	    <!-- 标题栏 -->
	    <view class="page-header">
	      <text class="title">我的收藏</text>
	    </view>
	    
	    <!-- 收藏列表 -->
	    <view class="collect-list" v-if="collectList.length > 0">
	      <view 
	        class="collect-item" 
	        v-for="(item, index) in collectList" 
	        :key="item.id"
	        @click="navToDetail(item.spuId)"
	      >
	        <!-- 商品图片 -->
	        <image 
	          :src="item.mainImgUrl || '/static/temp/default.png'" 
	          mode="aspectFill"
	        ></image>
	        
	        <!-- 商品信息 -->
	        <view class="item-info">
	          <text class="title clamp">{{ item.title }}</text>
	          <text class="price">￥{{ item.price }}</text>
	          <view class="operate">
	            <text class="delete" @click.stop="deleteCollect(item.id, index)">
	              取消收藏
	            </text>
	          </view>
	        </view>
	      </view>
	    </view>
	    
	    <!-- 空收藏提示 -->
	    <view class="empty-collect" v-else>
	      <image src="/static/temp/empty-collect.png" mode="widthFix"></image>
	      <text>暂无收藏商品，去逛逛吧～</text>
	    </view>
	  </view>
</template>

<script>
	import api from '@/utils/api.js';
	import { mapState } from 'vuex';
	export default {
	  data() {
	    return {
	      collectList: [] // 收藏列表
	    };
	  },
	  computed: {
	    ...mapState(['hasLogin'])
	  },
	  onShow() {
	    // 每次进入页面刷新收藏列表
	    if (this.hasLogin) {
	      this.loadCollectList();
	    } else {
	      // 未登录时跳转到登录页
	      uni.navigateTo({ url: '/pages/public/login' });
	    }
	  },
	  methods: {
	    // 加载当前用户的收藏列表
	  // 加载收藏列表方法
	  loadCollectList() {
	    api.getCollectList().then(res => {
	      console.log("收藏列表接口原始响应：", res); 
	  
	      if (res.code === 200) {
	        console.log("后端返回的收藏列表数据：", res.data.collectList);
	  
	        this.collectList = (res.data.collectList || []).map(item => ({
	          id: item.spuId,
	          spuId: item.spuId,
	          title: item.name || '未知商品',
	          mainImgUrl: item.mainImgUrl,
	          // 修复：使用 priceFee 字段，并转换为元
	          price: (item.priceFee ? parseFloat(item.priceFee) / 100 : 0).toFixed(2)
	        }));
	  
	        console.log("转换后的前端收藏列表：", this.collectList);
	      } else {
	        uni.showToast({ title: res.msg || '获取收藏列表失败', icon: 'none' });
	      }
	    }).catch(error => {
	      console.error("获取收藏列表失败：", error);
	      uni.showToast({ title: '获取收藏列表失败', icon: 'none' });
	    });
	  },
	    
	    // 跳转到商品详情页
	    navToDetail(spuId) {
	      uni.navigateTo({
	        url: `/pages/product/product?id=${spuId}`
	      });
	    },
	    
	    // 取消收藏（删除）
	   deleteCollect(spuId, index) {
	     // 1. 强制转换 spuId 为数字（关键！避免字符串类型导致后端解析异常）
	     const spuIdNum = Number(spuId);
	     console.log("准备取消收藏的 spuId（数字类型）：", spuIdNum, typeof spuIdNum);
	     
	     if (isNaN(spuIdNum)) {
	       uni.showToast({ title: '参数错误', icon: 'none' });
	       return;
	     }
	     
	     uni.showModal({
	       title: '提示',
	       content: '确定要取消收藏吗？',
	       success: (res) => {
	         if (res.confirm) {
	           // 2. 调用 api.cancelCollect，传递数字类型的 spuId
	           api.cancelCollect(spuIdNum).then(res => {
	             console.log("取消收藏接口响应：", res);
	             
	             if (res.code === 200) {
	               this.collectList.splice(index, 1); // 本地删除成功
	               uni.showToast({ title: '取消收藏成功', icon: 'none' });
	             } else {
	               uni.showToast({ title: res.msg || '取消收藏失败', icon: 'none' });
	             }
	           }).catch(error => {
	             console.error("取消收藏接口调用失败：", error);
	             uni.showToast({ title: '网络异常，请重试', icon: 'none' });
	           });
	         }
	       }
	     });
	   }
		
	  }
	};
</script>

<style>
.collect-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .page-header {
    height: 100upx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    
    .title {
      font-size: 34upx;
      color: #333;
      font-weight: 600;
    }
  }
  
  .collect-list {
    padding: 20upx;
    
    .collect-item {
      display: flex;
      background-color: #fff;
      border-radius: 16upx;
      padding: 20upx;
      margin-bottom: 20upx;
      align-items: center;
      
      image {
        width: 160upx;
        height: 160upx;
        border-radius: 8upx;
        margin-right: 20upx;
      }
      
      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 160upx;
        
        .title {
          font-size: 26upx;
          color: #333;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .price {
          font-size: 28upx;
          color: #fa436a;
          font-weight: 600;
        }
        
        .operate {
          align-self: flex-end;
          
          .delete {
            font-size: 24upx;
            color: #999;
            padding: 5upx 15upx;
            border: 1px solid #eee;
            border-radius: 20upx;
          }
        }
      }
    }
  }
  
  .empty-collect {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 200upx;
    
    image {
      width: 240upx;
      height: 240upx;
      margin-bottom: 40upx;
    }
    
    text {
      font-size: 28upx;
      color: #999;
    }
  }
}
</style>
